<template>
  <div class="container">
    <!-- 添加文章对话框 -->
    <el-dialog
      :visible="showAddDialog"
      :title="updateId ? '修改文章' : '新增文章'"
      @close="close"
    >
      <el-form
        ref="articleData"
        label-width="100px"
        :model="articleData"
        :rules="ruleAdd"
      >
        <el-form-item label="文章标题" size="mini" prop="title">
          <el-input v-model="articleData.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" size="mini" prop="articleBody">
          <!-- 富文本编辑器 -->
          <div class="local-quill-editor">
            <quill-editor
              v-model="articleData.articleBody"
              :options="editorOption"
              class="editor"
              @blur="$refs.articleData.validateField('articleBody')"
            ></quill-editor>
          </div>
        </el-form-item>
        <el-form-item label="视频地址" size="mini">
          <el-input v-model="articleData.videoURL"></el-input>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="end">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="addConfirmClick">确认</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 局部引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

// 引入添加文章的方法
import { add, detail, update } from '@/api/hmmm/articles'

// 工具栏配置项
const toolbarOptions = [
  // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['bold', 'italic', 'underline', 'strike'],

  // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  // [{ header: 1 }, { header: 2 }],
  // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ list: 'ordered' }, { list: 'bullet' }],
  // 引用  代码块-----['blockquote', 'code-block']
  ['blockquote', 'code-block'],
  // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  // [{ script: 'sub' }, { script: 'super' }],
  // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  // [{ indent: '-1' }, { indent: '+1' }],
  // 文本方向-----[{'direction': 'rtl'}]
  // [{ direction: 'rtl' }],
  // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  // [{ size: ['small', false, 'large', 'huge'] }],
  // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  // [{ header: [1, 2, 3, 4, 5, 6, false] }],
  // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  // [{ color: [] }, { background: [] }],
  // 字体种类-----[{ font: [] }]
  // [{ font: [] }],
  // 对齐方式-----[{ align: [] }]
  // [{ align: [] }],
  // 清除文本格式-----['clean']
  // ['clean'],
  // 链接、图片、视频-----['link',  'video']
  ['image', 'link']
]

export default {
  components: {
    quillEditor
    // VueQuillEditor
  },
  props: {
    // 弹层的显示和隐藏
    showAddDialog: {
      typeof: Boolean,
      default: false
    },
    // 文章的id
    updateId: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      // 配置富文本编辑器的数据
      editorOption: {
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow',
        placeholder: ''
        // Some Quill optiosn...
      },

      // 文章的列表
      articleData: {
        title: '', // 标题
        articleBody: '', // 文章正文
        videoURL: '' // 视频地址
      },

      // form的校验
      ruleAdd: {
        title: [{ required: true, message: '请输入文章标题', tirgger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', tirgger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 修改文章的数据回显
    async getUpdateArti () {
      const { data } = await detail({ id: this.updateId })
      // console.log('修改文章id', data)
      // 把结果赋值给form中 :model 的 属性值
      this.articleData = data
    },

    // 点击了确认按钮
    addConfirmClick () {
      // 文章的整体校验
      this.$refs.articleData.validate(async (isOK) => {
        if (isOK) {
          // 判断：如果呦id是 编辑功能，如果没有id是 添加功能
          if (this.updateId) {
            console.log('修改功能')
            // 调用修改文章的接口
            await update({ ...this.articleData, id: this.updateId })
            // 友好的提示用户
            // this.$message.success('操作成功')
            this.close()
          } else {
            // 添加文章功能
            // 调用接口，发送添加文章请求
            await add(this.articleData)
          }
          // 友好的提示用户
          this.$message.success('操作成功')
          // 刷新页面（通知父组件刷新页面）
          this.$emit('updateAddAticle')
          // 重置表单 + 关闭弹层
          this.close()
        }
      })
    },

    // 关闭弹层
    close () {
      // 手动重置表单
      this.articleData = {}
      // 重置表单
      this.$refs.articleData.resetFields()
      // 关闭弹层
      this.$emit('closeAddDialog', false)
    }
  }
}
</script>

<style scoped>
.editor {
  width: 100%;
  display: inline-block;
  height: 200px;
}
</style>
